<!-- 向左滑动 右边出现操作按钮 -->
<template>
	<view class="wrapper" :style="{'height': wrapHeight + 'rpx'}">
		<view :style="[Tactive == index ? leftStyle : '']" class="item-view" 
			@touchstart="touchStart($event, index)"
			@touchmove="touchMove($event, index)"
			@touchend="touchEnd($event, index)" 
			@click="itemClick(itemData, index)"
		>
			<slot></slot>
		</view>

		<view :style="[Tactive === index ? rightStyle : '']" class="delete" @click.stop="operation(itemData)">
			<!-- <image :style="operationImageStyle" :src="operationImageSrc" mode=""></image> -->
			<text class="iconfont iconicon7 color-base-bg font-size-base"></text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// item 数据
			itemData: {},

			// item 下标
			index: {
				type: Number,
				default: 0
			},

			// 操作按钮路劲
			operationImageSrc: {
				type: String,
				default: '../../static/del_icon.png'
			},

			// 操作按钮样式
			operationImageStyle: {
				type: String,
				default: 'width: 50rpx; height: 50rpx;'
			},

			// 是否允许滑动
			isSlide: {
				type: Boolean,
				default: true
			},
			
			wrapHeight: {
				type: Number,
				default: 100
			}
		},
		data() {
			return {
				startX: null, //起始位置
				startM: null,
				startE: null, //结束位置
				left: 0,
				deleteBtn: 100,
				leftStyle: {},
				rightStyle: {},
				Tactive: 0
			};
		},
		methods: {
			operation(item) {
				this.init();
				this.$emit('operationCallBack', item);
			},

			itemClick(item, index) {
				this.leftStyle = {};
				this.rightStyle = {};
				var lastIndex = uni.getStorageSync('lastSlideIndex');
				this.$emit('itemClickCallBack', {
					lastSlideIndex: lastIndex,
					index: index,
					item: this.itemData
				});
			},

			init() {
				this.leftStyle = {};
				this.rightStyle = {};
			},

			touchStart(e, index) {
				if (!this.isSlide) {
					//不允许滑动
					return;
				}
				this.left = 0;
				this.Tactive = index;
				this.startX = e.touches[0].clientX;
				var lastIndex = uni.getStorageSync('lastSlideIndex');
				this.$emit('itemTouchStart', {
					lastSlideIndex: lastIndex,
					item: this.itemData
				});
			},
			touchMove(e, index) {
				if (!this.isSlide) {
					//不允许滑动
					return;
				}
				this.startM = e.touches[0].clientX;
				this.left = this.startM - this.startX;
				if (this.left > this.deleteBtn) {
					//右滑     注意: 这里的100,是与删除div的width保持一致;
					// this.left = this.deleteBtn; //转成正数
					// this.left = 0;
				}

				//左滑
				if (this.left < -this.deleteBtn) {
					this.left = -this.deleteBtn; //转成正数
					this.rightStyle = {
						left: this.left + 'px'
					};
					var temp = this.deleteBtn + this.left;
					this.leftStyle = {
						left: temp + 'px'
					};
				}
			},
			touchEnd(e, index) {
				if (!this.isSlide) {
					//不允许滑动
					return;
				}
				if (this.left != 0 && this.left < this.deleteBtn) {
					//鼠标松开时, 如果长度小于.delete的width;
					this.left = -50;
					this.leftStyle = {
						left: this.left + 'px'
					};
					var temp = 0;
					this.rightStyle = {
						right: temp + 'px'
					};
					uni.setStorageSync('lastSlideIndex', index);
					this.$emit('itemTouchEnd', {
						index: index,
						item: this.itemData
					});
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.wrapper {
		width: 100%;
		border-radius: $border-radius;
		// line-height: 100rpx;
		// height: 100rpx;
		font-size: 14px;
		overflow: hidden;
		display: flex;
		position: relative;

		.item-view {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			/* padding: 0 30rpx; */
			width: 100%;
			height: 100%;
			border-radius: $border-radius;
			background: #fff;
			color: black;
			position: absolute;
			left: 0;
			z-index: 3;
			transition: all 0.5s;
		}

		.delete {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 0;
			right: 0;
			background-color: transparent;
			// width: 200rpx;
			width: 100rpx;
			height: 100%;
			// background: #ffffff;
			color: #fff;
			text-align: end;
			transition: all 0.5s;
			
			text {
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 50%;
				display: inline-block;
			}
		}
	}
</style>
